Alarm Clock using JS
In this blog, I’ll walk you through how I created a simple Alarm Clock using HTML, CSS, and JavaScript. This project uses setInterval() to update time every second and plays a sound when the alarm time is reached. It’s a fun beginner-friendly project that helps you understand working with time, events, and audio in JavaScript.
🧩 Project Overview
The main idea is simple:
Display the current time that updates every second.
Let users set an alarm using an input field.
Continuously check the current time against the alarm time.
When they match, play a sound and show an alert
Displaying the Current Time
We use setInterval() to run a function every second. Inside that function, we create a new Date() object and display the current time on the screen.
setInterval(() => {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById("clock").textContent = timeString;
}, 1000);
2. Setting the Alarm
We use an input field of type time so the user can easily select an alarm time.
When the user clicks the “Set Alarm” button, we store the selected time in a variable
function setAlarm() {
const input = document.getElementById("alarmTime").value;
if (input) {
alarmTime = input;
alert("✅ Alarm set for " + alarmTime);
}
}
3. Checking the Alarm
Inside the same setInterval() loop, we check if the current time (hours + minutes) matches the alarm time.
If they match, we play a sound and show an alert.
if (current === alarmTime) {
alarmSound.play();
alert("⏰ Alarm Ringing!");
alarmTime = null;
}
4. Playing a Sound
We added an <audio> tag in HTML with a simple beep sound file.
When the alarm goes off, we call alarmSound.play() to trigger the sound.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alarm Clock</title>
<style>
body {
font-family: Arial, sans-serif;
background: #1e293b;
color: #f8fafc;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
.clock {
font-size: 2rem;
margin-bottom: 20px;
}
input, button {
padding: 10px;
margin: 5px;
font-size: 1rem;
}
button {
cursor: pointer;
background: #2563eb;
color: white;
border: none;
border-radius: 6px;
}
button:hover {
background: #1d4ed8;
}
</style>
</head>
<body>
<div class="clock" id="clock">00:00:00</div>
<label for="alarmTime">Set Alarm Time:</label>
<input type="time" id="alarmTime">
<button onclick="setAlarm()">Set Alarm</button>
<audio id="alarmSound" src="https://www.soundjay.com/button/beep-07.wav" preload="auto"></audio>
<script>
const clock = document.getElementById("clock");
const alarmSound = document.getElementById("alarmSound");
let alarmTime = null;
let alarmTimeout = null;
// 🕒 Update Clock every second
setInterval(() => {
const now = new Date();
const timeString = now.toLocaleTimeString();
clock.textContent = timeString;
// ⏰ Check if alarm should go off
if (alarmTime) {
let current = now.getHours().toString().padStart(2, "0") + ":" +
now.getMinutes().toString().padStart(2, "0");
if (current === alarmTime) {
alarmSound.play();
alert("⏰ Alarm Ringing!");
alarmTime = null; // reset alarm after ringing
}
}
}, 1000);
function setAlarm() {
const input = document.getElementById("alarmTime").value;
if (input) {
alarmTime = input;
alert("✅ Alarm set for " + alarmTime);
}
}
</script>
</body>
</html>